<template>
  <el-dialog class="dialog" title="请登录" :visible.sync="isShowPop" @close="resetForm" width="400px" center>
    <el-form ref="formRef" :model="formData" :rules="formRules" class="form" label-width="80px" label-position="left">
      <el-form-item label="登录账号" prop="username">
        <el-input v-model="formData.username"></el-input>
      </el-form-item>
      <el-form-item label="登录密码" prop="password">
        <el-input type="password" v-model="formData.password"></el-input>
      </el-form-item>
      <el-form-item label="昵称" prop="nickname">
        <el-input v-model="formData.nickname"></el-input>
      </el-form-item>
      <el-form-item label="邮箱" prop="email">
        <el-input v-model="formData.email"></el-input>
      </el-form-item>
      <!--        头像-->
      <el-form-item prop="avatar" label="头像">
        <el-upload
            class="avatar-uploader"
            ref="upload"
            :multiple="false"
            action="#"
            :show-file-list="false"
            :accept="accept"
            :on-remove="handleRemove"
            :on-success="handleSuccess"
            :http-request="handleUploadFile"
            :before-upload="handleBeforeUpload">
          <img v-if="imageUrl" :src="imageUrl" class="avatar" alt=""/>
          <i v-else class="el-icon-plus avatar-uploader-icon"></i>
        </el-upload>
      </el-form-item>
      <el-form-item style="text-align: right">
        <el-button @click="handleClose">取消</el-button>
        <el-button type="primary" @click="handleSubmit">注册并登录</el-button>
      </el-form-item>
    </el-form>
  </el-dialog>
</template>

<script>
import { reqRegister } from '@/api/clientApi'
import dialogMixin from '@/mixins/dialogMixin'
import { reqUpload } from '@/api/uploadApi'
import { curr_evn } from '@/config/envConfig'

export default {
  mixins: [dialogMixin],
  data() {
    return {
      accept: 'image/jpeg,image/jpg,image/png',
      formData: {
        nickname: '',
        username: '',
        password: '',
        email: '',
        avatar: '',
        type: 0
      },
      formRules: {
        username: [
          { required: true, message: "请输入登录账号", trigger: "blur" },
          { min: 2, max: 10, message: "长度在2-10个字符之间" }
        ],
        nickname: [
          { required: false, message: "请输入昵称", trigger: "blur" },
          { min: 2, max: 10, message: "长度在2-10个字符之间" }
        ],
        password: [
          { required: true, message: "请输入登录密码", trigger: "blur" },
          { min: 6, max: 10, message: "长度在 6 到 10 个字符", trigger: "blur" }
        ],
      },
      imageUrl: ''
    }
  },
  methods: {
    refresh() {
      this.$nextTick(()=>{
        this.resetForm()
      })
    },
    handleSuccess(res) {
      this.imageUrl = res.data
    },
    handleRemove() {
      this.imageUrl = ''
    },
    resetForm() {
      this.$refs.formRef.resetFields()
      this.imageUrl = ''
    },
    handleBeforeUpload(file) {
      const isLt2M = file.size / 1024 / 1024 < 2;
      if (!isLt2M) {
        this.$message.error('上传头像图片大小不能超过 2MB!');
      }
      return isLt2M;
    },
    handleUploadFile(params) {
      this.loading = true
      let file = params.file
      const form = new FormData()
      form.append('file', file)
      reqUpload(form).then(data => {
        this.imageUrl = data.url
        this.loading = false
      }).catch(() => {
        this.loading = false
      })
    },
    /**
     * 注册并登录
     */
    handleSubmit() {
      this.$refs.formRef.validate(async valid => {
        if (!valid) return;
        let user = Object.assign({}, this.formData)
        user.email = this.formData.email
        user.avatar = this.imageUrl
        reqRegister(user).then(data => {
          this.$message.success("注册成功")
          this.$store.dispatch('user/loginWithUserInfo', data)
          this.isShowPop = false
        })
      })
    },
  }
}
</script>

<style lang="less" scoped>

.avatar-uploader .el-upload {
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

.avatar-uploader .el-upload:hover {
  border-color: #409EFF;
}

.avatar-uploader-icon {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  font-size: 28px;
  color: #8c939d;
  width: 100px;
  height: 100px;
  line-height: 100px;
  text-align: center;
}

.avatar {
  width: 100px;
  height: 100px;
  display: block;
}

.login_form {
  width: 100%;
  padding: 0 20px;
  box-sizing: border-box;
}

.btns {
  display: flex;
  justify-content: flex-end;
}

.login_dialog {
  opacity: 1;
}

</style>
